/**
 * Copyright (C) 2024 Checkmk GmbH - License: GNU General Public License v2
 * This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
 * conditions defined in the file COPYING, which is part of this source code package.
 */
@import url('./colors.css');
@import url('./dimensions.css');

:root {
  /* Colors */
  --success: var(--color-corporate-green-50);
  --success-dimmed: rgb(17 188 122);
  --success-dimmed-2: rgb(13 141 91);

  --white: rgb(255, 255, 255);
  --white-dimmed: rgba(255, 255, 255, 0.5);
  --black: rgb(0, 0, 0);
  --grey-4: rgb(51, 51, 51);
  --grey-4-dimmed: rgba(51, 51, 51, 0.8);
  --error-msg-bg-color: rgba(200, 50, 50, 0.15);
  --form-readonly-error-bg-color: rgb(252, 85, 85);
  --tag-added-color-light: rgb(6, 103, 193);
  --tag-color: rgb(0, 168, 181);
  --tag-explicit-color: rgb(119, 72, 152);
  --tag-discovered-color: rgba(243, 174, 75);
  --tag-ruleset-color: rgba(222, 67, 131);
  --default-help-icon-bg-color: rgb(6, 103, 193);
  --default-help-icon-bg-color-hover: rgb(56, 133, 205);
  --scrollbar-color: rgb(78, 93, 105);

  /* Fonts */
  --font-size-xxlarge: 18px;
  --font-size-xlarge: 16px;
  --font-size-large: 14px;
  --font-size-normal: 12px;
  --font-size-small: 10px;
  --font-weight-default: 400;
  --font-weight-bold: 700;

  /* Spacings */
  --spacing-double: 20px;
  --spacing: 10px;
  --spacing-half: 5px;

  /* Borders */
  --border-radius: 4px;
  --border-radius-half: 2px;
  --border-width-1: 1px;

  /* Dimensions */
  --form-field-height: 21px;

  /* Z indexes */
  --z-index-base: 0;
  --z-index-modal: 1000;
  --z-index-dropdown: 2000;
  --z-index-popup: 3000;
  --z-index-tooltip: 4000;

  /* Icons that are only defined for facelift, so without dark variant */
  --icon-checkmark: url('~cmk-frontend/themes/facelift/images/icon_checkmark.svg');
  --icon-checkmark-bare: url('~cmk-frontend/themes/facelift/images/icon_checkmark_bare.svg');
  --icon-crit-problem: url('~cmk-frontend/themes/facelift/images/icon_crit_problem.svg');
  --icon-back: url('~cmk-frontend/themes/facelift/images/icon_back.png');
  --icon-continue: url('~cmk-frontend/themes/facelift/images/icon_continue.png');
  --icon-save-to-services: url('~cmk-frontend/themes/facelift/images/icon_save_to_services.svg');
  --icon-insertdate: url('~cmk-frontend/themes/facelift/images/icon_insertdate.svg');
  --icon-alert-crit: url('~cmk-frontend/themes/facelift/images/icon_alert_crit.svg');
  --icon-alert-warn: url('~cmk-frontend/themes/facelift/images/icon_alert_warn.png');
  --icon-alert-up: url('~cmk-frontend/themes/facelift/images/icon_alert_up.png');
  --icon-about-checkmk: url('~cmk-frontend/themes/facelift/images/icon_about_checkmk.svg');
  --icon-check: url('~cmk-frontend/themes/facelift/images/icon_check.svg');
  --icon-cross: url('~cmk-frontend/themes/facelift/images/icon_cross.svg');
  --icon-save: url('~cmk-frontend/themes/facelift/images/icon_save.svg');
  --icon-cancel: url('~cmk-frontend/themes/facelift/images/icon_cancel.svg');
  --icon-pending-task: url('~cmk-frontend/themes/facelift/images/icon_pending_task.svg');
  --icon-sparkle: url('~cmk-frontend/themes/facelift/images/icon_sparkle.svg');
  --icon-history: url('~cmk-frontend/themes/facelift/images/icon_topic_history.png');
  --icon-main-changes: url('~cmk-frontend/themes/facelift/images/icon_main_changes.svg');
  --icon-main-setup-active: url('~cmk-frontend/themes/facelift/images/icon_main_setup_active.svg');
  --icon-main-monitoring-active: url('~cmk-frontend/themes/facelift/images/icon_main_monitoring_active.svg');
  --icon-main-customize-active: url('~cmk-frontend/themes/facelift/images/icon_main_customize_active.svg');
  /* TODO: remove icno-info and replace it with icon-help-new (icon-help later)*/
  --icon-info: url('~cmk-frontend/themes/facelift/images/icon_info.svg');
  --icon-plus: url('~cmk-frontend/themes/facelift/images/icon_plus.svg');
  --icon-edit: url('~cmk-frontend/themes/facelift/images/icon_edit.svg');
  --icon-load-graph: url('~cmk-frontend/themes/facelift/images/load_graph.png');
  --icon-filter: url('~cmk-frontend/themes/facelift/images/icon_filter.svg');

  --icon-help-activated: url('~cmk-frontend/themes/facelift/images/icon_help_activated.svg');
  --icon-connection-tests: url('~cmk-frontend/themes/facelift/images/icon_connection_tests.svg');
  --icon-validation-error: url('~cmk-frontend/themes/facelift/images/icon_validation_error.png');

  --icon-checkmk-logo-min: url('~cmk-frontend/themes/facelift/images/icon_checkmk_logo_min.svg');
  --icon-rulesets: url('~cmk-frontend/themes/facelift/images/icon_rulesets.svg');
  --icon-users: url('~cmk-frontend/themes/facelift/images/icon_users.svg');
  --icon-assign: url('~cmk-frontend/themes/facelift/images/icon_assign.svg');
  --icon-backup: url('~cmk-frontend/themes/facelift/images/icon_backup.svg');
  --icon-contactgroups: url('~cmk-frontend/themes/facelift/images/icon_contactgroups.svg');
  --icon-licensing: url('~cmk-frontend/themes/facelift/images/icon_licensing.svg');
  --icon-learning-guide: url('~cmk-frontend/themes/facelift/images/icon_learning_guide.svg');
  --icon-services: url('~cmk-frontend/themes/facelift/images/icon_services.svg');
  --icon-check-parameters: url('~cmk-frontend/themes/facelift/images/icon_check_parameters.svg');
  --icon-sites: url('~cmk-frontend/themes/facelift/images/icon_sites.svg');
  --icon-folder: url('~cmk-frontend/themes/facelift/images/icon_folder.svg');
  --icon-networking: url('~cmk-frontend/themes/facelift/images/icon_networking.svg');
  --icon-aws-logo: url('~cmk-frontend/themes/facelift/images/icon_aws_logo.svg');
  --icon-azure-vms: url('~cmk-frontend/themes/facelift/images/icon_azure_vms.svg');
  --icon-gcp: url('~cmk-frontend/themes/facelift/images/icon_gcp.svg');
  --icon-synthetic-monitoring-yellow: url('~cmk-frontend/themes/facelift/images/icon_synthetic_monitoring_yellow.svg');
  --icon-opentelemetry: url('~cmk-frontend/themes/facelift/images/icon_opentelemetry.svg');
  --icon-dashboard: url('~cmk-frontend/themes/facelift/images/icon_dashboard.svg');
  --icon-dashboard-problems: url('~cmk-frontend/themes/facelift/images/icon_dashboard_problems.svg');
  --icon-svc-problems: url('~cmk-frontend/themes/facelift/images/icon_svc_problems.svg');
  --icon-timeperiods: url('~cmk-frontend/themes/facelift/images/icon_timeperiods.svg');
  --icon-hostgroups: url('~cmk-frontend/themes/facelift/images/icon_hostgroups.svg');
  --icon-notifications: url('~cmk-frontend/themes/facelift/images/icon_notifications.svg');
  --icon-analysis: url('~cmk-frontend/themes/facelift/images/icon_analysis.svg');
  --icon-new: url('~cmk-frontend/themes/facelift/images/icon_new.svg');
  --icon-copied: url('~cmk-frontend/themes/facelift/images/icon_copied.svg');

  --icon-topic-administration: url('~cmk-frontend/themes/facelift/images/icon_topic_administration.png');
  --icon-topic-agents: url('~cmk-frontend/themes/facelift/images/icon_topic_agents.png');
  --icon-topic-analyze: url('~cmk-frontend/themes/facelift/images/icon_topic_analyze.png');
  --icon-topic-applications: url('~cmk-frontend/themes/facelift/images/icon_topic_applications.png');
  --icon-topic-bi: url('~cmk-frontend/themes/facelift/images/icon_topic_bi.png');
  --icon-topic-change_password: url('~cmk-frontend/themes/facelift/images/icon_topic_change_password.png');
  --icon-topic-checkmk: url('~cmk-frontend/themes/facelift/images/icon_topic_checkmk.svg');
  --icon-topic-events: url('~cmk-frontend/themes/facelift/images/icon_topic_events.png');
  --icon-topic-exporter: url('~cmk-frontend/themes/facelift/images/icon_topic_exporter.svg');
  --icon-topic-general: url('~cmk-frontend/themes/facelift/images/icon_topic_general.png');
  --icon-topic-graphs: url('~cmk-frontend/themes/facelift/images/icon_topic_graphs.png');
  --icon-topic-history: url('~cmk-frontend/themes/facelift/images/icon_topic_history.png');
  --icon-topic-host: url('~cmk-frontend/themes/facelift/images/icon_topic_hosts.png');
  --icon-topic-inventory: url('~cmk-frontend/themes/facelift/images/icon_topic_inventory.png');
  --icon-topic-maintenance: url('~cmk-frontend/themes/facelift/images/icon_topic_maintenance.png');
  --icon-topic-monitoring: url('~cmk-frontend/themes/facelift/images/icon_topic_monitoring.svg');
  --icon-topic-my_workplace: url('~cmk-frontend/themes/facelift/images/icon_topic_my_workplace.svg');
  --icon-topic-network: url('~cmk-frontend/themes/facelift/images/icon_topic_network.svg');
  --icon-topic-other: url('~cmk-frontend/themes/facelift/images/icon_topic_other.png');
  --icon-topic-overview: url('~cmk-frontend/themes/facelift/images/icon_topic_overview.png');
  --icon-topic-problems: url('~cmk-frontend/themes/facelift/images/icon_topic_problems.png');
  --icon-topic-profile: url('~cmk-frontend/themes/facelift/images/icon_topic_profile.png');
  --icon-topic-quick-setups: url('~cmk-frontend/themes/facelift/images/icon_topic_quick_setups.svg');
  --icon-topic-reporting: url('~cmk-frontend/themes/facelift/images/icon_topic_reporting.svg');
  --icon-topic-services: url('~cmk-frontend/themes/facelift/images/icon_topic_services.png');
  --icon-topic-site: url('~cmk-frontend/themes/facelift/images/icon_topic_site.png');
  --icon-topic-system: url('~cmk-frontend/themes/facelift/images/icon_topic_system.svg');
  --icon-topic-two-factor: url('~cmk-frontend/themes/facelift/images/icon_topic_two_factor.png');
  --icon-topic-user-interface: url('~cmk-frontend/themes/facelift/images/icon_topic_user_interface.svg');
  --icon-topic-users: url('~cmk-frontend/themes/facelift/images/icon_topic_users.png');
  --icon-topic-visualization: url('~cmk-frontend/themes/facelift/images/icon_topic_visualization.png');
  --icon-topic-synthetic-monitoring: url('~cmk-frontend/themes/facelift/images/icon_synthetic_monitoring_topic.svg');
  --icon-topic-pagetype: url('~cmk-frontend/themes/facelift/images/icon_pagetype_topic.svg');
  --icon-topic-search: url('~cmk-frontend/themes/facelift/images/icon_main_search_active.svg');
}

@layer theme {
  body[data-theme='facelift'] {
    /* Base colors */
    --ux-theme-0: var(--color-daylight-grey-0);
    --ux-theme-1: var(--color-daylight-grey-10);
    --ux-theme-2: var(--color-daylight-grey-20);
    --ux-theme-3: var(--color-daylight-grey-30);
    --ux-theme-4: var(--color-daylight-grey-40);
    --ux-theme-5: var(--color-daylight-grey-50);
    --ux-theme-6: var(--color-daylight-grey-60);
    --ux-theme-7: var(--color-daylight-grey-70);
    --ux-theme-8: var(--color-daylight-grey-80);
    --ux-theme-9: var(--color-daylight-grey-90);
    --ux-theme-10: var(--color-daylight-grey-100);

    --color-skeleton: var(--color-conference-grey-10);
    --color-skeleton-shimmer-0: rgba(30, 38, 46, 0);
    --color-skeleton-shimmer-1: rgba(30, 38, 46, 0.02);
    --color-skeleton-shimmer-2: rgba(30, 38, 46, 0.06);

    --color-warning: rgb(255, 208, 0);
    --color-danger: rgb(229, 63, 63);

    /* ATTENTION: No explicit rgb color definitions beyond this point. Reuse variables above */

    /* Fonts */
    --font-color: var(--grey-4);
    --font-color-dimmed: var(--grey-4-dimmed);

    /* Icons */
    --icon-main-help: url('~cmk-frontend/themes/facelift/images/icon_main_help.svg');
    --icon-close: url('~cmk-frontend/themes/facelift/images/icon_close.svg');
    --icon-folder-blue: url('~cmk-frontend/themes/facelift/images/icon_folder_blue.svg');
    --icon-drag: url('~cmk-frontend/themes/facelift/images/icon_drag.svg');

    --icon-info-circle: url('~cmk-frontend/themes/facelift/images/icon_info_circle.svg');
    --icon-tree-closed: url('~cmk-frontend/themes/facelift/images/tree_closed.svg');
    --icon-search: url('~cmk-frontend/themes/facelift/images/icon_search_action.svg');
    --icon-checkmark-plus: url('~cmk-frontend/themes/facelift/images/icon_checkmark_plus.svg');
    --icon-export-link: url('~cmk-frontend/themes/facelift/images/icon_export_link.svg');
    --icon-reload: url('~cmk-frontend/themes/facelift/images/icon_reload_cmk.svg');

    /* Colors */
    --default-submit-button-border-color: var(--success-dimmed);
    --default-border-color: rgb(234 234 234);
    --default-bg-color: var(--ux-theme-0);
    --default-table-th-color: rgb(232 232 238);
    --default-form-element-bg-color: var(--ux-theme-5);
    --default-form-element-bg-color-disabled: var(--ux-theme-6);
    --default-form-element-border-color: rgb(183, 180, 180);
    --default-form-element-placeholder-color: rgba(30, 38, 46, 0.5);
    --default-select-hover-color: var(--success);
    --default-select-focus-color: var(--success-dimmed);
    --default-button-emphasis-color: rgb(13, 141, 91);
    --default-border-color-green: rgb(21, 209, 160);
    --default-tooltip-icon-color: rgb(233, 233, 233);
    --default-tooltip-background-color: rgb(233, 233, 233);
    --default-tooltip-text-color: rgb(17, 24, 29);
    --custom-scroll-bar-thumb-border-color: rgb(234, 234, 234);
    --custom-scroll-bar-thumb-color: rgb(88, 88, 88);
    --custom-scroll-bar-backgroud-color: var(--ux-theme-0);
    --default-component-bg-color: rgb(240, 240, 240);
    --help-text-bg-color: var(--ux-theme-5);
    --help-text-font-color: rgb(51, 51, 51); /* $grey-4 */
    --form-element-required-color: var(--success-dimmed-2);
    --input-hover-bg-color: var(--ux-theme-4);
    --code-background-color: var(--color-daylight-grey-50);
    --wizard-progress-bar-background-color: var(--color-daylight-grey-60);
  }

  body[data-theme='modern-dark'] {
    /* Base colors */
    --ux-theme-0: var(--color-midnight-grey-100);
    --ux-theme-1: var(--color-midnight-grey-90);
    --ux-theme-2: var(--color-midnight-grey-80);
    --ux-theme-3: var(--color-midnight-grey-70);
    --ux-theme-4: var(--color-midnight-grey-60);
    --ux-theme-5: var(--color-midnight-grey-50);
    --ux-theme-6: var(--color-midnight-grey-40);
    --ux-theme-7: var(--color-midnight-grey-30);
    --ux-theme-8: var(--color-midnight-grey-20);
    --ux-theme-9: var(--color-midnight-grey-10);
    --ux-theme-10: var(--color-midnight-grey-0);

    --color-skeleton: var(--color-white-0);
    --color-skeleton-shimmer-0: rgba(255, 255, 255, 0);
    --color-skeleton-shimmer-1: rgba(255, 255, 255, 0.02);
    --color-skeleton-shimmer-2: rgba(255, 255, 255, 0.06);

    --color-warning: rgb(255, 215, 3);
    --color-danger: rgb(180, 45, 45);

    /* ATTENTION: No explicit rgb color definitions beyond this point. Reuse variables above */

    /* Fonts */
    --font-color: var(--white);
    --font-color-dimmed: var(--white-dimmed);

    /* Icons */
    --icon-main-help: url('~cmk-frontend/themes/modern-dark/images/icon_main_help.svg');
    --icon-close: url('~cmk-frontend/themes/modern-dark/images/icon_close.svg');
    --icon-folder-blue: url('~cmk-frontend/themes/modern-dark/images/icon_folder_blue.svg');
    --icon-drag: url('~cmk-frontend/themes/modern-dark/images/icon_drag.svg');

    --icon-info-circle: url('~cmk-frontend/themes/modern-dark/images/icon_info_circle.svg');
    --icon-tree-closed: url('~cmk-frontend/themes/modern-dark/images/tree_closed.svg');
    --icon-search: url('~cmk-frontend/themes/modern-dark/images/icon_search_action.svg');
    --icon-checkmark-plus: url('~cmk-frontend/themes/modern-dark/images/icon_checkmark_plus.svg');
    --icon-export-link: url('~cmk-frontend/themes/modern-dark/images/icon_export_link.svg');
    --icon-frameurl: url('~cmk-frontend/themes/facelift/images/icon_frameurl.svg');
    --icon-reload: url('~cmk-frontend/themes/modern-dark/images/icon_reload_cmk.svg');
    --icon-main-changes: url('~cmk-frontend/themes/modern-dark/images/icon_main_changes.svg');
    --icon-assign: url('~cmk-frontend/themes/modern-dark/images/icon_assign.svg');

    /* Colors */
    --default-submit-button-border-color: rgb(8 94 61);
    --default-border-color: rgb(38 45 52);
    --default-bg-color: var(--ux-theme-1);
    --default-table-th-color: var(--ux-theme-2);
    --default-form-element-bg-color: var(--color-midnight-grey-50);
    --default-form-element-bg-color-disabled: var(--ux-theme-3);
    --default-form-element-border-color: var(--color-mid-grey-60);
    --default-form-element-placeholder-color: rgba(255, 255, 255, 0.5);
    --default-select-hover-color: var(--success);
    --default-select-focus-color: var(--success-dimmed);
    --default-button-emphasis-color: rgb(19, 211, 137);
    --default-border-color-green: rgb(21, 209, 160);
    --default-tooltip-icon-color: rgb(83, 83, 83);
    --default-tooltip-background-color: rgb(17, 24, 29);
    --default-tooltip-text-color: var(--white);
    --custom-scroll-bar-thumb-border-color: var(--ux-theme-5);
    --custom-scroll-bar-thumb-color: rgb(224, 224, 228);
    --custom-scroll-bar-backgroud-color: var(--ux-theme-5);
    --default-component-bg-color: rgb(46, 44, 44);
    --default-dialog-bg-color: var(--ux-theme-5);
    --default-dialog-font-color: var(--white);
    --form-element-required-color: var(--success);
    --input-hover-bg-color: var(--ux-theme-4);
    --code-background-color: var(--color-midnight-grey-100);
    --wizard-progress-bar-background-color: var(--white);
  }
}

.cmk-vue-app ::-webkit-scrollbar {
  width: 8px;
}

.cmk-vue-app ::-webkit-scrollbar-track {
  background: var(--ux-theme-6);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.cmk-vue-app ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 16px;
  border: 3px solid var(--ux-theme-6);
}

.cmk-vue-app ::-webkit-scrollbar-corner {
  background-color: var(--ux-theme-6);
}

.cmk-vue-app table.nform input {
  margin: 0;
  vertical-align: baseline;
}
